$dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);

%overview-transparent-bg {
  $_overview_transparent_bg: transparentize(white, .9); 

  background-color: $_overview_transparent_bg !important;
  box-shadow: inset 0 0 0 1px $_overview_transparent_bg !important;
}

// Dropshadow for large icons
.icon-dropshadow {
  icon-shadow: 0 2px 4px $shadow_color;
}

/* Slider */
.slider {
  -barlevel-height: 6px;
}

/* Notifications & Message Tray */
.notification-banner { box-shadow: $dialog_box_shadow; }

/* Window Picker */
// Window titles
.window-caption {
  color: black;
  background-color: white;
  box-shadow: $dialog_box_shadow;
}

// Close button
.window-close {
  background-image: url("assets/close-window.svg");
  background-size: 32px;
  background-color: transparent;
  box-shadow: none;
  color: transparent;
  height: 32px;
  width: 32px;
  transition-duration: .2s;

  &:hover {
    background-image: url("assets/close-window-hover.svg");
    background-color: transparent;
  }

  &:active {
    background-image: url("assets/close-window-active.svg");
    background-color: transparent;
    color: transparent;
    transition-duration: 0s;
  }
}

/* Workspace Switcher */
.ws-switcher-indicator {
  padding: 2px;
  margin: 10px;

  &:active {
    padding: 4px;
    margin: 8px;
  }
}

/* Top Bar */
#panelBox {
  padding: if($full-panel == 'true', 0, 5px 12px);
  background: transparent;
}

#panel {
  $_panel_bg: transparentize(black, .8);
  $_panel_fg: white;
  $_panel_text_shadow: 0 1px 2px transparentize(black, 0.5);
  padding: if($full-panel == 'true', 1px 0, 0);
  font-size: 90%;
  height: 2em;
  border-radius: if($full-panel == 'true', 0, 7px);
  background: $_panel_bg;
  text-shadow: $_panel_text_shadow;
  box-shadow: none;

  StIcon { icon-shadow: $_panel_text_shadow; }

  &.unlock-screen,
  &.login-screen,
  &.lock-screen,
  &:overview {
    background-color: transparent;
    .panel-button {
      &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; }
    }
  }

  .panel-button {
    color: $_panel_fg;

    &:active, &:focus, &:checked {
      box-shadow: inset 0 0 0 100px transparentize(white, .75);
      &:hover {
        box-shadow: inset 0 0 0 100px transparentize(white, .65);
      }
    }

    &:hover {
      box-shadow: inset 0 0 0 100px transparentize(white, .8);
    }

    &.clock-display {
      color: $_panel_fg;

      &:active, &:focus, &:checked {
        .clock {
          box-shadow: inset 0 0 0 100px transparentize(white, .75);
          &:hover {
            box-shadow: inset 0 0 0 100px transparentize(white, .65);
          }
        }
      }

      &:hover {
        box-shadow: none !important;
        .clock {
          box-shadow: inset 0 0 0 100px transparentize(white, .8);
        }
      }
    }

    &#panelActivities {
      & .workspace-dot {
        background-color: $_panel_fg;
      }
    }

    &.screen-recording-indicator,
    &.screen-sharing-indicator {
      color: white;
    }
  }
}

#panel :first-child > :first-child > .panel-button:hover {
  border-radius: 8px;
}

#panel :last-child > :last-child > .panel-button:last-child {
  &:hover, &:active, &:focus, &:overview, &:checked {
    border-radius: 12px 8px 8px 12px;
  }
}

/* Search */
#searchResults :selected {
  @extend %overview-transparent-bg;
}

// search entry
.search-entry {
  $_text-shadow: 0px 1px 2px transparentize(black, 0.5);

  @extend %overview-transparent-bg;

  width: 21em;
  padding: .6em .8em;
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  text-shadow: $_text-shadow;
  transition-duration: 200ms;

  &, StLabel.hint-text { color: $osd_fg_color; }

  &:focus, &:hover {
    background-color: white!important;
    font-weight: normal;
    box-shadow: none !important;
    text-shadow: none;

    &, StLabel.hint-text { color: black; }

    .search-entry-icon {
      color: black;
      icon-shadow: none;
    }
  }

  .search-entry-icon {
    color: white;
    icon-shadow: $_text-shadow;
  }
}

// search results
.search-section-content {
  @extend %overview-transparent-bg;
}

%search_section_content_item {
  background: transparent;
  &:hover {
    @extend %overview-transparent-bg;
  }
}

// search result provider
.search-provider-icon .list-search-provider-details { font-weight: bold; }

.list-search-result .list-search-result-description {
  color: transparentize($osd_fg_color, .2);
}

/* Dash */
#dash {
  color: $osd_fg_color;

  .dash-background {
    @extend %overview-transparent-bg;
  }

  StIcon {
    icon-shadow: 0 2px 6px transparentize(black, .6);
  }

  .dash-item-container {
    .show-apps,
    .overview-tile {
      .overview-icon { background: transparent !important; }

      &:focus .overview-icon { @extend %overview-transparent-bg; }
      &:hover .overview-icon { @extend %overview-transparent-bg; }
      &:active .overview-icon { @extend %overview-transparent-bg; }
      &:checked .overview-icon { @extend %overview-transparent-bg; }
    }
  }
}

.dash-background, .dash-separator {
  @extend %overview-transparent-bg;
}

/* App Grid */
.overview-tile {
  background: transparent;
  &, &:hover, &:active, &:checked, &:focus, &:highlighted, &:selected {
    &:hover, &:active, &:focus { background: transparentize(white, .9); }
  }
}

.app-folder-dialog .overview-tile {
  background: transparent;
  &, &:hover, &:active, &:checked, &:focus, &:highlighted, &:selected {
    &:hover, &:active, &:focus { background: transparentize(white, .85); }
  }
}

// app folders
.overview-tile.app-folder {
  @extend %overview-transparent-bg;
}

.app-folder-dialog {
  background: black;
  box-shadow: 0 0 100px lighten(black, 4%);
}

/* OSD */
// Raise volume and workspace-switcher osd dialogs
.osd-window, .workspace-switcher {
  margin-bottom: 128px;
}

/* Workspace pager */
// thumbnails in overview
.workspace-thumbnails {
  .workspace-thumbnail {
    @extend %overview-transparent-bg;
  }
}

// selected indicator
.workspace-thumbnail-indicator { border: 2px solid white; }

/* Login Dialog */

$_login_transparent_bg: transparentize(white, .8);

%login_transparent_bg {
  background-color: $_login_transparent_bg !important;
  color: white !important;
  border: 1px solid $_login_transparent_bg;
  box-shadow: none !important;
}

%login_button {
  @extend %login_transparent_bg;
  &:focus, &:hover, &:active, &:checked, &:selected {
    @extend %login_transparent_bg;
    background-color: transparentize(white, .8)!important;
  }
}

.login-dialog,
.unlock-dialog {
  font-size: 11pt;
  background: url("assets/login-background");
  background-size: cover;

  .login-dialog-prompt-entry {
    border-radius: 999px;
    &, &:hover, &:focus, &:insensitive { @extend %login_transparent_bg; }

    StLabel.hint-text { color: transparentize($system_fg_color, 0.3); }
  }
}

.login-dialog-not-listed-button { @extend %login_button; }

.login-dialog-button {
  &.cancel-button,
  &.switch-user-button,
  &.login-dialog-session-list-button { @extend %login_button; }
}

// User list
.login-dialog-user-list-view {
  .login-dialog-user-list {
    .login-dialog-user-list-item {
      @extend %login_button;
    }
  }
}
